import React, { lazy } from 'react';
import { createBrowserRouter, Navigate } from 'react-router-dom';
import { SpinLoading } from 'antd-mobile';

import AuthRouter from '@/router/AuthRouter';

const Login = lazy(() => import('@/views/Login/Login'));
const Register = lazy(() => import('@/views/Register/Register'));
const Layout = lazy(() => import('@/layout/Layout'));
const Home = lazy(() => import('@/views/Home/Home'));
const Article = lazy(() => import('@/views/Article/Article'));
const Notify = lazy(() => import('@/views/Notify/Notify'));
const User = lazy(() => import('@/views/User/User'));
const Patient = lazy(() => import('@/views/Patient/Patient'));
const ConsultDoctor = lazy(() => import('@/views/ConsultType/ConsultDoctor/ConsultDoctor'));
const ConsultFast = lazy(() => import('@/views/ConsultType/ConsultFast/ConsultFast'));
const ConsultMedicine = lazy(() => import('@/views/ConsultType/ConsultMedicine/ConsultMedicine'));
const Department = lazy(() => import('@/views/Department/Department'));
const ConsultIllness = lazy(() => import('@/views/ConsultType/ConsultFast/views/ConsultIllness/ConsultIllness'));
const ConsultPay = lazy(() => import('@/views/ConsultType/ConsultFast/views/ConsultPay/ConsultPay'));
const ConsultChat = lazy(() => import('@/views/ConsultType/ConsultChat/ConsultChat'));
const ConsultChoose = lazy(() => import('@/views/ConsultType/ConsultMedicine/views/ConsultChoose/ConsultChoose'));
const MedicineDetail = lazy(() => import('@/views/ConsultType/ConsultMedicine/views/MedicineDetail/MedicineDetail'));
const ConsultOrder = lazy(() => import('@/views/ConsultType/ConsultOrder/ConsultOrder'));
const ConsultDetail = lazy(() => import('@/views/ConsultType/ConsultOrder/views/ConsultDetail/ConsultDetail'));
const Address = lazy(() => import('@/views/Address/Address'));
const Doctor = lazy(() => import('@/views/Doctor/Doctor'));
const LoginCallback = lazy(() => import('@/views/Login/components/LoginCallback/LoginCallback'));

// 按需引入导致报错：懒加载模式的组件写法外面需要套一层Loading的提示加载组件
const withLoadingComponent = (component: JSX.Element) => (
  <React.Suspense fallback={<div className="lazyLoading"><SpinLoading color="primary" /></div>}>
    {component}
  </React.Suspense>
);

const router = createBrowserRouter([
  {
    path: '/',
    element: withLoadingComponent(<AuthRouter><Layout></Layout></AuthRouter>),
    children: [
      {
        index: true,
        element: <Navigate to="/home" />,
      },
      {
        path: '/home',
        element: withLoadingComponent(<AuthRouter><Home></Home></AuthRouter>),
      },
      {
        path: '/article',
        element: withLoadingComponent(<AuthRouter><Article></Article></AuthRouter>),
      },
      {
        path: '/notify',
        element: withLoadingComponent(<AuthRouter><Notify></Notify></AuthRouter>),
      },
      {
        path: '/user',
        element: withLoadingComponent(<AuthRouter><User></User></AuthRouter>),
      },
    ],
  },
  {
    path: '/login',
    element: withLoadingComponent(<AuthRouter><Login></Login></AuthRouter>),
  },
  {
    path: '/login/callback',
    element: withLoadingComponent(<AuthRouter><LoginCallback></LoginCallback></AuthRouter>),
  },
  {
    path: '/register',
    element: withLoadingComponent(<AuthRouter><Register></Register></AuthRouter>),
  },
  {
    path: '/patient',
    element: withLoadingComponent(<AuthRouter><Patient></Patient></AuthRouter>),
  },
  {
    path: '/address',
    element: withLoadingComponent(<AuthRouter><Address></Address></AuthRouter>),
  },
  {
    path: '/doctor',
    element: withLoadingComponent(<AuthRouter><Doctor></Doctor></AuthRouter>),
  },
  {
    path: '/consult-doctor',
    element: withLoadingComponent(<AuthRouter><ConsultDoctor></ConsultDoctor></AuthRouter>),
  },
  {
    path: '/consult-fast',
    element: withLoadingComponent(<AuthRouter><ConsultFast></ConsultFast></AuthRouter>),
  },
  {
    path: '/consult-medicine',
    element: withLoadingComponent(<AuthRouter><ConsultMedicine></ConsultMedicine></AuthRouter>),
  },
  {
    path: '/department',
    element: withLoadingComponent(<AuthRouter><Department></Department></AuthRouter>),
  },
  {
    path: 'consult-illness',
    element: withLoadingComponent(<AuthRouter><ConsultIllness></ConsultIllness></AuthRouter>),
  },
  {
    path: '/consult-pay',
    element: withLoadingComponent(<AuthRouter><ConsultPay></ConsultPay></AuthRouter>),
  },
  {
    path: '/consult-choose',
    element: withLoadingComponent(<AuthRouter><ConsultChoose></ConsultChoose></AuthRouter>),
  },
  {
    path: '/medicine-detail/:id',
    element: withLoadingComponent(<AuthRouter><MedicineDetail></MedicineDetail></AuthRouter>),
  },
  {
    path: '/consult-order',
    element: withLoadingComponent(<AuthRouter><ConsultOrder></ConsultOrder></AuthRouter>),
  },
  {
    path: '/consult-detail/:id',
    element: withLoadingComponent(<AuthRouter><ConsultDetail></ConsultDetail></AuthRouter>),
  },
  {
    path: '/room',
    element: withLoadingComponent(<AuthRouter><ConsultChat></ConsultChat></AuthRouter>),
  },

]);


export default router;
